<template>
	<div style="display: flex">
		<div class="trees_box">
			<el-tree
				:data="Treedata"
				accordion
				:props="defaultProps"
				highlight-current
				@node-click="handleNodeClick"
			></el-tree>
		</div>
		<div class="app-container" style="width: 85%">
			<el-form
				:model="queryParams"
				ref="queryForm"
				:inline="true"
				v-show="showSearch"
				label-width="100px"
			>
				<el-form-item label="小题名称" prop="smallTopic">
					<el-input
						v-model="queryParams.smallTopic"
						placeholder="请输入小题名称"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="所属题库" prop="bankTypeId">
					<el-select
						v-model="queryParams.bankTypeId"
						filterable
						allow-create
						default-first-option
						placeholder="请选择所属题库"
						clearable
						:style="{ width: '100%' }"
					>
						<el-option
							v-for="(item, index) in questionBankType"
							:key="index"
							:label="item.name"
							:value="item.id"
							:disabled="item.disabled"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item label="题目类型" prop="type">
        <el-input
          v-model="queryParams.type"
          disabled
          placeholder="请输入小题名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
				</el-form-item>-->
				<el-form-item label="选项数量" prop="optionCount">
					<el-input
						v-model="queryParams.optionCount"
						placeholder="请输入选项数量"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<!--      <el-form-item label="答案(选择题/判断题可能会有)" prop="answer">-->
				<!--        <el-input-->
				<!--          v-model="queryParams.answer"-->
				<!--          placeholder="请输入答案(选择题/判断题可能会有)"-->
				<!--          clearable-->
				<!--          size="small"-->
				<!--          @keyup.enter.native="handleQuery"-->
				<!--        />-->
				<!--      </el-form-item>-->
				<el-form-item label="分数" prop="fraction">
					<el-input
						v-model="queryParams.fraction"
						placeholder="请输入分数"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="一级知识点" prop="knowledgeA">
					<el-input
						v-model="queryParams.knowledgeA"
						placeholder="请输入一级知识点"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="二级知识点" prop="knowledgeB">
					<el-input
						v-model="queryParams.knowledgeB"
						placeholder="请输入二级知识点"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="考察知识点" prop="investigateKnow">
					<el-input
						v-model="queryParams.investigateKnow"
						placeholder="请输入考察知识点"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="认知分类" prop="categorization">
					<el-input
						v-model="queryParams.categorization"
						placeholder="请输入认知分类"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="难易程度" prop="difficulty">
					<el-select
						v-model="queryParams.difficulty"
						filterable
						allow-create
						default-first-option
						placeholder="请选择难易程度"
						clearable
						:style="{ width: '100%' }"
					>
						<el-option
							v-for="(item, index) in field103Options"
							:key="index"
							:label="item.label"
							:value="item.value"
							:disabled="item.disabled"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="内容相关性" prop="correlation">
					<el-input
						v-model="queryParams.correlation"
						placeholder="请输入内容相关性"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="模板分类" prop="formwork">
					<el-select
						v-model="queryParams.formwork"
						filterable
						allow-create
						default-first-option
						placeholder="请选择模板分类"
						clearable
						:style="{ width: '100%' }"
					>
						<el-option
							v-for="(item, index) in formworkOptions"
							:key="index"
							:label="item.label"
							:value="item.value"
							:disabled="item.disabled"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="创建时间" prop="createTime">
					<el-date-picker
						clearable
						size="small"
						v-model="queryParams.createTime"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择创建时间"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="创建人" prop="createBy">
					<el-input
						v-model="queryParams.createBy"
						placeholder="请输入创建人"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>

			<el-row :gutter="10" class="mb8">
				<el-col :span="1.5">
					<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button
						type="success"
						plain
						icon="el-icon-edit"
						size="mini"
						:disabled="single"
						@click="handleUpdate"
					>修改</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button
						type="danger"
						plain
						icon="el-icon-delete"
						size="mini"
						:disabled="multiple"
						@click="handleDelete"
					>删除</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button
						type="warning"
						plain
						icon="el-icon-download"
						size="mini"
						:loading="exportLoading"
						@click="handleExport"
					>导出</el-button>
				</el-col>
				<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
			</el-row>

			<el-table v-loading="loading" :data="questionbankList" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" />
				<!--      <el-table-column label="创建人" align="center" prop="id" />-->
				<!-- <el-table-column label="大题名称" align="center" prop="bigQuestion" /> -->
				<el-table-column label="小题名称" align="center" width="160" prop="smallTopic">
					<template slot-scope="scope">
						<div class="html_box ql-editor">
							<div v-html="scope.row.smallTopic"></div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="题目类型" align="center" prop="type" />
				<el-table-column label="选项数量" align="center" prop="optionCount" />
				<el-table-column label="答案" align="center" :show-overflow-tooltip="true" prop="answer" />
				<el-table-column label="分数" align="center" prop="fraction" />
				<el-table-column label="一级知识点" align="center" :show-overflow-tooltip="true" prop="knowledgeA" />
				<el-table-column label="二级知识点" align="center" :show-overflow-tooltip="true" prop="knowledgeB" />
				<el-table-column
					label="考察知识点"
					align="center"
					:show-overflow-tooltip="true"
					prop="investigateKnow"
				/>
				<el-table-column
					label="认知分类"
					align="center"
					:show-overflow-tooltip="true"
					prop="categorization"
				/>
				<el-table-column label="难易程度" align="center" :show-overflow-tooltip="true" prop="difficulty" />
				<el-table-column label="内容相关性" align="center" :show-overflow-tooltip="true" prop="correlation" />
				<el-table-column label="模板分类" align="center" :show-overflow-tooltip="true" prop="formwork" />
				<el-table-column label="创建时间" align="center" prop="createTime" width="180">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
					</template>
				</el-table-column>
				<el-table-column label="创建人" align="center" prop="createBy" />
				<el-table-column label="修改时间" align="center" prop="updateTime" width="180">
					<template slot-scope="scope">
						<span>{{ parseTime(scope.row.updateTime, "{y}-{m}-{d}") }}</span>
					</template>
				</el-table-column>
				<el-table-column label="修改人" align="center" prop="updateBy" />
				<el-table-column
					label="操作"
					align="center"
					width="180px"
					fixed="right"
					class-name="small-padding fixed-width"
				>
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-view" @click="handleShow(scope.row)">预览</el-button>
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
						<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<pagination
				v-show="total > 0"
				:total="total"
				:page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize"
				@pagination="getList"
			/>
			<!-- 预览 -->
			<el-dialog
				:visible.sync="Showdetail"
				v-if="Showdetail"
				width="40%"
				append-to-body
				class="dialog"
			>
				<div>
					<showDetail :row="propdata"></showDetail>
				</div>
			</el-dialog>
			<!-- 添加或修改基本题库管理对话框 -->

			<!-- 尝试移植为dialog -->
			<el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
				<el-row :gutter="15">
					<el-form
						ref="elForm"
						:model="formData"
						:rules="dialogrules"
						size="medium"
						label-width="100px"
						label-position="left"
					>
						<el-col :span="12">
							<el-form-item label="题目类型" prop="type">
								<el-input
									v-model="formData.type"
									placeholder="请输入题目类型"
									:disabled="true"
									clearable
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="所属题库" prop="bankTypeId">
								<el-select
									v-model="formData.bankTypeId"
									default-first-option
									placeholder="请选择模板"
									clearable
									:style="{ width: '100%' }"
								>
									<el-option
										v-for="(item, index) in questionBankType"
										:key="index"
										:label="item.name"
										:value="item.id"
										:disabled="item.disabled"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24"></el-col>
						<el-col :span="12">
							<el-form-item label="模板分类" prop="formwork">
								<el-select
									v-model="formData.formwork"
									default-first-option
									placeholder="请选择模板"
									@change="handleFormwork()"
									clearable
									:style="{ width: '100%' }"
								>
									<el-option
										v-for="(item, index) in formworkOptions"
										:key="index"
										:label="item.label"
										:value="item.value"
										:disabled="item.disabled"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="选项数量" prop="optionCount">
								<el-input
									type="number"
									v-model.trim="formData.optionCount"
									placeholder="请输入选项数量"
									clearable
									disabled
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24"></el-col>
						<el-col :span="12">
							<el-form-item label="分值" prop="fraction">
								<el-input
									v-model.trim="formData.fraction"
									placeholder="请输入分值"
									clearable
									disabled
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="难易程度" prop="difficulty">
								<el-select
									v-model="formData.difficulty"
									filterable
									allow-create
									default-first-option
									placeholder="请选择难易程度"
									clearable
									:style="{ width: '100%' }"
								>
									<el-option
										v-for="(item, index) in field103Options"
										:key="index"
										:label="item.label"
										:value="item.value"
										:disabled="item.disabled"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="小题名称" prop="smallTopic">
								<!--                <el-input-->
								<!--                  v-model="formData.smallTopic"-->
								<!--                  type="textarea"-->
								<!--                  placeholder="请输入小题名称"-->
								<!--                  :autosize="{ minRows: 4, maxRows: 4 }"-->
								<!--                  :style="{ width: '100%' }"-->
								<!--                ></el-input>-->
								<Editor style="width: 580px" v-model="formData.smallTopic" />
							</el-form-item>
						</el-col>

						<el-col :span="19" style="margin-bottom: 30px; margin-top: 10px">
							<el-upload
								ref="upload"
								:on-change="filehandleChange"
								:file-list="fileList"
								:action="field101Action"
								list-type="text"
								accept=".wave, .aiff, .mpeg, .mp3, .midi, .wma, .amr, .ape, .flac, .acc"
								:headers="header"
								:before-remove="filebeforeRemove"
								:on-remove="filehandleRemove"
								:on-success="filehandleSucces"
								:before-upload="filefield101BeforeUpload"
							>
								<el-button size="small" type="primary" icon="el-icon-upload">音频上传</el-button>
							</el-upload>
						</el-col>

						<el-col :span="19">
							<el-form-item label="选项内容" prop="field106">
								<el-input
									v-model.trim="formData.field106"
									placeholder="请输入选项内容"
									clearable
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label-width="1px">
								<el-button type="primary" size="medium" @click="addchose">添加选项</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="选项" prop="field108">
								<span :style="{ color: '#909399' }" v-if="this.formData.options == ''">请添加选项</span>
								<el-radio-group v-model="formData.answer" size="medium" @change="selectchange">
									<div class="radio">
										<el-radio
											class="radio-item"
											v-for="(item, index) in options"
											:key="index"
											:label="item.value"
											:disabled="item.disabled"
										>{{ item.num }}.{{ item.context }}</el-radio>
									</div>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label-width="100px" label v-if="options.length != 0">
								<el-button type="danger" size="medium" @click="deletechose">删除选项</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="答案" prop="answer">
								<el-input
									v-model="formData.answer"
									placeholder="请输入答案"
									:disabled="true"
									clearable
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="小题讲解" prop="explains">
								<el-input
									v-model="formData.explains"
									type="textarea"
									placeholder="请输入小题讲解"
									clearable
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="考察知识点" prop="investigateKnow">
								<el-input
									v-model="formData.investigateKnow"
									placeholder="请输入考察知识点"
									clearable
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="一级知识点" prop="knowledgeA">
								<el-input
									v-model="formData.knowledgeA"
									type="textarea"
									placeholder="请输入一级知识点"
									clearable
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="二级知识点" prop="knowledgeB">
								<el-input
									v-model="formData.knowledgeB"
									type="textarea"
									placeholder="请输入二级知识点"
									clearable
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="认知分类" prop="categorization">
								<el-input
									v-model="formData.categorization"
									placeholder="请输入认知分类"
									clearable
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="内容相关性" prop="correlation">
								<el-input
									v-model="formData.correlation"
									placeholder="请输入内容相关性"
									clearable
									:style="{ width: '100%' }"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item size="large" class="clearfix">
								<span class="right">
									<el-button type="primary" @click="dialogsubmitForm">提交</el-button>
									<el-button @click="dailogresetForm">重置</el-button>
								</span>
							</el-form-item>
						</el-col>
					</el-form>
				</el-row>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import {
	listQuestionbank,
	getQuestionbank,
	delQuestionbank,
	addQuestionbank,
	updateQuestionbank,
	exportQuestionbank,
	getQueryTree,
} from '@/api/topic/questionbank'
import { getToken } from '@/utils/auth'
import {
	addSelect,
	search,
	changeSelect,
	getFormark,
	deleQuestion,
	deleQuestions,
} from '@/api/topic/select'
import showDetail from '@/components/showDetail'
import {
	listTemplate,
	getTemplate,
	delTemplate,
	addTemplate,
	updateTemplate,
	exportTemplate,
} from '@/api/topic/template'
import { listQuestionBankType } from '@/api/topic/QuestionBankType'

export default {
	name: 'oneselect',
	components: { showDetail: showDetail },
	data() {
		return {
			fileList: [],
			header: { Authorization: 'Bearer ' + getToken() },
			field101Action: process.env.VUE_APP_BASE_API + '/common/upload',
			// 树数据
			Treedata: [],
			defaultProps: {
				children: 'data',
				label: 'courseName',
			},
			propdata: [],
			delkey: null,
			deleitemIndex: null,
			num: 1,
			myaddkey: 0,
			formworkOptions: [],
			formData: {
				type: '单项选择题',
				explains: null,
				num: null,
				bankTypeId: null,
				fraction: undefined,
				beanName: 'singleChoiceServiceImpl',
				difficulty: undefined,
				smallTopic: undefined,
				formwork: null,
				optionCount: 0,
				field106: undefined,
				answer: undefined,
				investigateKnow: undefined,
				knowledgeA: undefined,
				knowledgeB: undefined,
				options: [],
				audioUrl: '',
			},
			dialogrules: {
				difficulty: [
					{
						required: true,
						message: '选择题目难度',
						trigger: 'blur',
					},
				],
				type: [
					{
						required: true,
						message: '请输入题目类型',
						trigger: 'blur',
					},
				],
				bankTypeId: [
					{
						required: true,
						message: '请选择所属题库',
						trigger: 'blur',
					},
				],
				explains: [
					{
						required: true,
						message: '请输入小题讲解',
						trigger: 'blur',
					},
				],
				formwork: [
					{
						required: true,
						message: '请输入或选择模板分类',
						trigger: 'blur',
					},
				],
				fraction: [
					{
						required: true,
						message: '请输入分值,必须是数字',
						trigger: 'blur',
					},
				],
				field103: [
					{
						required: true,
						message: '请输入难易程度',
						trigger: 'change',
					},
				],
				smallTopic: [
					{
						required: true,
						message: '请输入小题名称',
						trigger: 'blur',
					},
				],
				answer: [
					{
						required: true,
						message: '请选择答案',
						trigger: 'blur',
					},
				],
				field110: [
					{
						required: true,
						message: '请输入考察知识点',
						trigger: 'blur',
					},
				],
				field111: [
					{
						required: true,
						message: '请输入一级知识点',
						trigger: 'blur',
					},
				],
				field112: [
					{
						required: true,
						message: '请输入二级知识点',
						trigger: 'blur',
					},
				],
				field113: [
					{
						required: true,
						message: '请输入认知分类',
						trigger: 'blur',
					},
				],
				field114: [
					{
						required: true,
						message: '请输入内容相关性',
						trigger: 'blur',
					},
				],
			},
			field103Options: [
				{
					label: '0.1',
					value: 0.1,
				},
				{
					label: '0.2',
					value: 0.2,
				},
				{
					label: '0.3',
					value: 0.3,
				},
				{
					label: '0.4',
					value: 0.4,
				},
				{
					label: '0.5',
					value: 0.5,
				},
				{
					label: '0.6',
					value: 0.6,
				},
				{
					label: '0.7',
					value: 0.7,
				},
				{
					label: '0.8',
					value: 0.8,
				},
				{
					label: '0.9',
					value: 0.9,
				},
				{
					label: '1',
					value: 1,
				},
			],
			options: [],
			// 题库
			questionBankType: [],
			// 遮罩层
			loading: true,
			// 导出遮罩层
			exportLoading: false,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 基本题库管理表格数据
			questionbankList: [],
			// 弹出层标题
			title: '',
			// 是否显示预览内容
			Showdetail: false,
			// 是否显示弹出层
			open: false,
			// 题目类型字典
			typeOptions: [],
			// 认知分类字典
			categorizationOptions: [],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				bigQuestion: null,
				smallTopic: null,
				// type: "单项选择题",
				beanName: 'singleChoiceServiceImpl',
				optionCount: null,
				bankTypeId: null,
				answer: null,
				fraction: null,
				knowledgeA: null,
				knowledgeB: null,
				investigateKnow: null,
				categorization: null,
				difficulty: null,
				correlation: null,
				formwork: null,
				createTime: null,
				createBy: null,
				id: '',
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {},
		}
	},
	created() {
		this.getList()
		this.getQueryTree()
		this.getFormarkdata()
		this.getDicts('question_type').then((response) => {
			this.typeOptions = response.data
		})
		this.getDicts('topic_categorization').then((response) => {
			this.categorizationOptions = response.data
		})
	},
	mounted() {
		console.log(this.fileList)
	},
	methods: {
		//提交模板类型
		handleFormwork() {
			for (let i = 0; i < this.formworkOptions.length; i++) {
				if (this.formworkOptions[i].value == this.formData.formwork) {
					this.formData.optionCount = this.formworkOptions[i].count
					this.formData.fraction = this.formworkOptions[i].questionScore
					this.formData.questionTemplateId = this.formworkOptions[i].id
				}
			}
		},
		//移除文件事件
		filebeforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`)
		},
		//移除文件
		filehandleRemove(file, fileList) {
			this.formData.audioUrl = ''
		},
		// 第二次上传，删除第一个
		filehandleChange(file, fileList) {
			if (fileList.length > 0) {
				this.fileList = [fileList[fileList.length - 1]]
			}
		},
		//上传文件成功
		filehandleSucces(response, file, fileList) {
			this.formData.audioUrl = response.fileName
			console.log(this.fileList)
		},
		//选择文件
		filefield101BeforeUpload(file) {
			console.log(file)
		},

		getQueryTree() {
			this.loading = true
			getQueryTree().then((res) => {
				this.Treedata = res
				this.loading = false
			})
		},

		// 树形目录点击后获取对应的学生信息
		handleNodeClick(data) {
			this.queryParams = {
				pageNum: 1,
				pageSize: 10,
				bigQuestion: null,
				smallTopic: null,
				// type: "单项选择题",
				beanName: 'singleChoiceServiceImpl',
				optionCount: null,
				bankTypeId: null,
				answer: null,
				fraction: null,
				knowledgeA: null,
				knowledgeB: null,
				investigateKnow: null,
				categorization: null,
				difficulty: null,
				correlation: null,
				formwork: null,
				createTime: null,
				createBy: null,
				id: '',
			}
			switch (data.flag) {
				case 'startingUnit': // 一级
					break
				case 'course': // 二级
					// this.queryParams.courseId = data.treeData[0].id;
					break
				case 'bankType': // 三级
					this.queryParams.bankTypeId = data.id
					break
				default:
					break
			}
			/** 查询课程信息列表 */
			this.getList()
		},

		//获取模板类型
		getFormarkdata() {
			this.loading = true
			const data = {
				beanName: this.formData.beanName,
			}
			listTemplate(data).then((response) => {
				console.log('题型模板', response.rows)
				this.formworkOptions = response.rows
				for (let i = 0; i < response.rows.length; i++) {
					this.formworkOptions[i].label = response.rows[i].name
					this.formworkOptions[i].value = response.rows[i].name
				}
			})
			// getFormark(data).then((response) => {
			//   for (let i = 0; i < response.length; i++) {
			//     this.formworkOptions[i] = {
			//       label: response[i],
			//       value: response[i],
			//     };
			//   }
			// });
		},
		// 增加选项
		addchose() {
			//修改设计就是把数组长度赋值给num，后面在做
			if (this.formData.options.length >= parseFloat(this.formData.optionCount)) {
				this.$message.error('选项数量已满')
				return
			}
			const that = this
			this.myaddkey = 0
			if (!that.formData.field106) {
				that.$message.error('请输入选项内容')
				return
			} else {
				let i = 0
				for (i; i < this.options.length; i++) {
					if (this.options[i].value == this.formData.field106) {
						that.$message.error('该选项已存在')
						this.myaddkey = 1
						break
					}
				}
			}
			if (this.myaddkey == 1) {
				return
			} else {
				const data = {
					context: this.formData.field106,
					value: this.formData.field106,
					keyTrue: false,
					num: String.fromCharCode(this.num + 64),
				}
				this.num++
				this.options.push(data)
				this.formData.field106 = ''
				this.delkey = 1
				this.formData.options = this.options
			}
		},
		// 删除选项
		deletechose() {
			if (this.options.length == 1) {
				this.options = []
				this.delkey = 0
				this.formData.answer = ''
				this.num--
			} else {
				if (!this.deleitemIndex) {
					this.$message.error('请选择一个选项删除或选项为空')
				} else {
					const index = this.deleitemIndex
					this.options.splice(index, 1)
					this.num--
					const that = this
					this.options.forEach(function (value, index, array) {
						that.options[index].num = String.fromCharCode(index + 65)
					})
					this.formData.answer = ''

					this.formData.options = this.options
				}
			}
		},
		// 单选正确答案
		selectchange(val) {
			this.formData.answer = val
			this.formData.field108 = val
			//deleitemIndex
			const that = this
			this.options.forEach(function (value, index) {
				if (val == value.value) {
					that.deleitemIndex = index
					that.options[index].keyTrue = true
				} else {
					that.options[index].keyTrue = false
				}
			})
			this.formData.options = this.options
		},
		dialogsubmitForm() {
			if (this.formData.options.length != parseFloat(this.formData.optionCount)) {
				this.$message.error('选项数量不对')
				return
			}
			this.$refs['elForm'].validate((valid) => {
				if (isNaN(Number(this.formData.fraction))) {
					this.$message.error('分值必须为数字')
					return
				}
				if (valid) {
					if (this.formData.id != null) {
						console.log('修改题库')
						this.formData.fraction = parseFloat(this.formData.fraction)
						console.log(this.formData)
						changeSelect(this.formData).then((response) => {
							this.msgSuccess('修改单选题成功')
							this.open = false
							this.dailogresetForm()
							this.getList()
						})
					} else {
						this.formData.fraction = parseFloat(this.formData.fraction)
						console.log('新增选择题', this.formData)
						addSelect(this.formData).then((response) => {
							this.msgSuccess('添加单选题成功')
							this.open = false
							this.dailogresetForm()
							this.getList()
							this.getFormarkdata()
						})
					}
				}
				// TODO 提交表单
			})
		},
		dailogresetForm() {
			this.formData = {
				type: '单项选择题',
				explain: '',
				beanName: 'singleChoiceServiceImpl',
				fraction: undefined,
				difficulty: undefined,
				// bankTypeId: undefined,
				smallTopic: undefined,
				optionCount: 0,
				field106: undefined,
				field108: 3,
				answer: undefined,
				investigateKnow: undefined,
				knowledgeA: undefined,
				knowledgeB: undefined,
				field113: undefined,
				field114: undefined,
				scoretype: null,
				options: [],
			}
			debugger
			this.options = []
			;(this.delkey = ''), (this.deleitemIndex = ''), (this.num = 1), (this.myaddkey = 0)
		},
		/** 查询基本题库管理列表 */
		getList() {
			this.loading = true
			listQuestionbank(this.queryParams).then((response) => {
				this.questionbankList = response.rows
				this.total = response.total
				this.loading = false
			})
			listQuestionBankType().then((response) => {
				this.questionBankType = response.rows
			})
		},
		// 题目类型字典翻译
		typeFormat(row, column) {
			return this.selectDictLabel(this.typeOptions, row.type)
		},
		// 认知分类字典翻译
		categorizationFormat(row, column) {
			return this.selectDictLabel(this.categorizationOptions, row.categorization)
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				parentId: null,
				personId: null,
				bigQuestion: null,
				smallTopic: null,
				type: '单项选择题',
				optionCount: null,
				answer: null,
				fraction: null,
				knowledgeA: null,
				knowledgeB: null,
				investigateKnow: null,
				categorization: null,
				difficulty: null,
				correlation: null,
				formwork: null,
				createTime: null,
				createBy: null,
				updateTime: null,
				updateBy: null,
			}
			this.resetForm('form')
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1
			console.log(this.queryParams)
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm')
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.dailogresetForm()
			this.open = true
			this.title = '添加单选题题库管理'
			this.formData.bankTypeId = this.queryParams.bankTypeId
		},
		/** 预览按钮操作 */
		handleShow(row) {
			this.propdata = row
			this.Showdetail = true
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset()
			this.dailogresetForm()
			const data = {
				bankId: row.id || this.ids[0],
				beanName: 'singleChoiceServiceImpl',
			}
			//  const id = row.id || this.ids
			search(data).then((response) => {
				console.log('修改的内容', response)
				this.formData = response
				this.num = this.formData.options.length + 1
				for (let i = 0; i < this.formData.options.length; i++) {
					this.formData.options[i].num = String.fromCharCode(i + 65)
					this.formData.options[i].value = this.formData.options[i].context
				}
				this.options = this.formData.options
				this.fileList = [
					{
						name: '音频文件',
						url: response.audioUrl,
					},
				]
				this.open = true
				this.title = '修改单选题题库管理'
			})
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.id != null) {
						updateQuestionbank(this.form).then((response) => {
							this.msgSuccess('修改成功')
							this.open = false
							this.getList()
						})
					} else {
						addQuestionbank(this.form).then((response) => {
							this.msgSuccess('新增成功')
							this.open = false
							this.getList()
						})
					}
				}
			})
			this.dailogresetForm()
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids
			let data = {}
			if (typeof ids == 'string') {
				data = {
					bankId: ids,
					beanName: this.formData.beanName,
				}
				this.$confirm('是否确认删除单选题题库管理编号为"' + ids + '"的数据项?', '警告', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(function () {
						return deleQuestion(data)
					})
					.then(() => {
						this.getList()
						this.msgSuccess('删除成功')
					})
					.catch(() => {})
			} else {
				data = {
					bankIds: ids,
					beanName: this.formData.beanName,
				}
				this.$confirm('是否确认删除单选题题库管理编号为"' + ids + '"的数据项?', '警告', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(function () {
						return deleQuestions(data)
					})
					.then(() => {
						this.getList()
						this.msgSuccess('删除成功')
					})
					.catch(() => {})
			}
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams
			this.$confirm('是否确认导出所有单选题题库管理数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					this.exportLoading = true
					return exportQuestionbank(queryParams)
				})
				.then((response) => {
					this.download(response.msg)
					this.exportLoading = false
				})
				.catch(() => {})
		},
	},
}
</script>
<style lang="scss">
.html_box {
	// width: 110px;
	height: 55px;
	// overflow: hidden;
}
.radio {
	display: flex;
	flex-direction: column;
}
.trees_box {
	width: 13%;
	padding-top: 20px;
	max-height: 130vh;
	overflow-y: auto;
	&::-webkit-scrollbar {
		width: 5px;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: rgba(0, 0, 0, 0.2);
	}
	&::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 0;
		background: rgba(0, 0, 0, 0.1);
	}
}
.radio-item {
	margin-top: 10px;
}
.icon {
	display: inline;
	margin-left: 20px;
}
</style>
